import React, {Component, Fragment} from "react";
import RItem from "../components/RItem";
import axios from "axios";

import { TransitionGroup,CSSTransition } from "react-transition-group";
export default class Order extends Component{
    constructor(props) {
        super(props);
        this.state = {
            inputVal:'11',
            order:['吃饭','睡觉']
        }
    }

    //react的生命周期
    // componentWillMount() { //React 16 已废弃
    //     console.log('will')
    // }

    // componentWillReceiveProps(){ //React 16 已废弃
    // }

    static getDerivedStateFromProps(nextProps,nextState){ //替代上面2个生命周期
        console.log(nextProps,nextState)
        return true
    }

    // componentWillUpdate(){ //React 16 已废弃
    //     console.log(1111)
    // }
    getSnapshotBeforeUpdate(prevProps,prevState){ //替代上面1个生命周期
        console.log('页面将要发生变化了！')
        return true
    }
    //页面发生变化时执行
    componentDidUpdate(prevProps,prevState){
        console.log('页面发生变化完了！')
        return true
    }



    //页面挂载完时执行
    componentDidMount() {
        console.log('页面挂载完了！')
    }

    //页面卸载时执行
    componentWillUnmount() {
        console.log('页面离开了！')
    }


    inpChange(e){
        //使用ref优化value
        this.setState({
            inputVal: this.el.value
        })
    }


    addItem(){
        this.setState({
            order: [...this.state.order,this.state.inputVal],
            inputVal:''
        })
    }

    delItem(index){
        let list  = this.state.order;
        list.splice(index,1)
        this.setState({
            order: list
        })
    }


    render(){
        console.log('render')
        return (
           <Fragment>
               <label htmlFor="inp">文本</label>
                <input id="inp"
                       value={this.state.inputVal}
                       onChange={this.inpChange.bind(this)}
                       ref={(el)=>this.el=el}
                />
                <button onClick={this.addItem.bind(this)}>添加</button>
               <ul>
                   {/*多动画DOM*/}
                   <TransitionGroup>
                       {
                           this.state.order.map((item,index)=>{
                               return (
                                   <CSSTransition
                                    timeout={2000}
                                    classNames="box-text"
                                    apper={true}
                                    unmountOnExit
                                    key={item+index}
                                   >
                                       <RItem
                                           key={item+index}
                                           index={index}
                                           delItem={this.delItem.bind(this)}
                                           item={item}
                                           user="技术胖"
                                       />
                                   </CSSTransition>
                               )
                           })
                       }
                   </TransitionGroup>
               </ul>
           </Fragment>
        )
    }

}